<template>
<div>
    <el-dialog :close-on-click-modal='false' title="商品爬取任务中心" :visible.sync="dialogVisible" @close="resetForm()" width="860px">
        <div v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="flexbox flexcenter flexbetween" style="margin-bottom:20px">
                <el-input placeholder="请输入任务ID查询" v-model="queryInfo.query" @change="getTaskList()" size="small" suffix-icon="el-icon-search" style="width:280px;border-radius:8px"></el-input>
                <el-button type="primary" @click="addTask()">添加任务</el-button>
            </div>
            <el-table :data="exportData" class="com_table" height="460px">
                <el-table-column prop="task_id" label="任务 ID" width="180">
                    <template slot-scope="scope">
                        {{scope.row.task_id}}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="文件状态" width="120">
                    <template slot-scope="scope">
                        <div class="flexbox flexcenter" v-if="scope.row.status==0">
                            <div class="tm_y gray_y"></div>
                            <div class="tm_t gray_t">待爬取</div>
                        </div>
                        <div class="flexbox flexcenter" v-else-if="scope.row.status==1">
                            <div class="tm_y gray_y"></div>
                            <div class="tm_t gray_t">爬取中</div>
                        </div>
                         <div class="flexbox flexcenter" v-else-if="scope.row.status==2">
                            <div class="tm_y green_y"></div>
                            <div class="tm_t green_t">爬取完成</div>
                        </div>
                        <div class="flexbox flexcenter" v-else-if="scope.row.status==3">
                            <div class="tm_y red_y"></div>
                            <div class="tm_t red_t">出错</div>
                             <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
                                <div slot="content" class="tooltips_box">{{scope.row.err_msg}}</div>
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;cursor:pointer;">
                                    <circle cx="10" cy="10" r="8" fill="#CFD4DD" />
                                    <path d="M7.39994 8.8544V8.9544H7.49994H8.74448H8.84448V8.8544C8.84448 8.40304 8.9303 8.06505 9.09801 7.83666L9.09808 7.83671L9.10032 7.83337C9.28302 7.56236 9.58377 7.42692 10.0436 7.42692C10.3967 7.42692 10.6621 7.52052 10.8451 7.70414C11.0208 7.89135 11.1226 8.15083 11.1226 8.49176C11.1226 8.7406 11.0343 8.98223 10.851 9.20803L10.7251 9.3559C10.3713 9.67381 10.0866 9.94944 9.87165 10.1838C9.65771 10.4171 9.50776 10.6151 9.43002 10.7769C9.2679 11.0923 9.20125 11.4719 9.20125 11.8984V12.0522V12.1522H9.30125H10.5567H10.6567V12.0522V11.8984C10.6567 11.6496 10.7079 11.4341 10.81 11.2286C10.9022 11.043 11.0355 10.8671 11.2214 10.7112L11.2214 10.7113L11.2232 10.7097C11.7459 10.2493 12.0675 9.9484 12.1706 9.83314L12.1709 9.8334L12.1762 9.82623C12.4532 9.4545 12.5999 8.98201 12.5999 8.41484C12.5999 7.72088 12.3728 7.16437 11.9115 6.75784C11.452 6.34177 10.8473 6.15 10.12 6.15C9.29227 6.15 8.63188 6.38707 8.13985 6.8706C7.63526 7.35566 7.39994 8.02186 7.39994 8.8544ZM10.584 13.1633L10.584 13.1632L10.5815 13.1609C10.3974 12.9879 10.1647 12.903 9.90169 12.903C9.63732 12.903 9.41597 12.9888 9.23278 13.1609C9.04607 13.3363 8.96107 13.5619 8.96107 13.8271C8.96107 14.0924 9.04607 14.318 9.23278 14.4934C9.41346 14.6632 9.63394 14.7623 9.90169 14.7623C10.166 14.7623 10.3874 14.6765 10.5706 14.5044C10.7559 14.3303 10.8532 14.0945 10.8532 13.8271C10.8532 13.5588 10.7553 13.3357 10.584 13.1633Z" fill="white" stroke="white" stroke-width="0.2" />
                                </svg>
                            </el-tooltip>
                        </div>
                        <div class="flexbox flexcenter" v-else-if="scope.row.status==4">
                            <div class="tm_y green_y"></div>
                            <div class="tm_t green_t">生成完成</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="have_sheet" label="飞书表格链接" width="120">
                    <template slot-scope="scope">
                        <div class="flexbox flexcenter">
                            <template v-if="scope.row.status!==4">
                                <svg width="56" height="32" viewBox="0 0 56 32" fill="none" xmlns="http://www.w3.org/2000/svg" style="no_point">
                                    <rect width="56" height="32" rx="4" fill="#A5B1D1" fill-opacity="0.1" />
                                    <g opacity="0.3">
                                        <path d="M20 8H33.3333C34.8061 8 36 9.19391 36 10.6667V24H22.6667C21.1939 24 20 22.8061 20 21.3333V8Z" fill="#35BD4B" />
                                        <path d="M23.8335 11.8335H31.0668C31.6743 11.8335 32.1668 12.326 32.1668 12.9335V20.1668H24.9335C24.326 20.1668 23.8335 19.6743 23.8335 19.0668V11.8335Z" stroke="white" />
                                        <path d="M23.8335 15.8335H32.3335" stroke="white" />
                                        <path d="M28 20L28 11.3333" stroke="white" />
                                    </g>
                                </svg>
                            </template>
                            <a class="flexbox flexcenter" :href="scope.row.feishu_sheet" target="_blank" :underline="false" v-else>
                                <svg width="56" height="32" viewBox="0 0 56 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect width="56" height="32" rx="4" fill="#A5B1D1" fill-opacity="0.1" />
                                    <path d="M20 8H33.3333C34.8061 8 36 9.19391 36 10.6667V24H22.6667C21.1939 24 20 22.8061 20 21.3333V8Z" fill="#35BD4B" />
                                    <path d="M23.8335 11.8335H31.0668C31.6743 11.8335 32.1668 12.326 32.1668 12.9335V20.1668H24.9335C24.326 20.1668 23.8335 19.6743 23.8335 19.0668V11.8335Z" stroke="white" />
                                    <path d="M23.8335 15.8335H32.3335" stroke="white" />
                                    <path d="M28 20L28 11.3333" stroke="white" />
                                </svg>
                            </a>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="start_batch_num" label="日期范围" >
                    <template slot-scope="scope">
                      <div>{{scope.row.start_batch_num | formattedDate}} - {{scope.row.end_batch_num | formattedDate}}</div>
                    </template>
                </el-table-column>
                 <el-table-column prop="start_batch_num" label="更新时间" >
                    <template slot-scope="scope">
                      <div>{{scope.row.build_sheet_time}}</div>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="action" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-link type="danger" :underline="false" @click="deletList(scope.row.id)">删除</el-link>
                    </template>
                </el-table-column> -->
            </el-table>
            <el-pagination style="margin-top:16px" background layout="total, prev, pager, next" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :total="total">
            </el-pagination>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="resetForm()" class="el-button-width" size="small">关 闭</el-button>
        </span>
    </el-dialog>
    <el-dialog :close-on-click-modal='false' title="添加任务" :visible.sync="dialogVisible2" @close="resetAddForm()" width="400px">
        <el-form ref="addFormRef" :model="addForm" label-position="top" :rules="addFormRules">
            <el-form-item label="商品链接" prop="url" label-width="80px">
                <el-input v-model="addForm.url"  placeholder="请输入商品链接" size="small"></el-input>
            </el-form-item>
            <el-form-item label="带货视频最小点赞数" prop="min_like_count" label-width="80px">
                <el-input v-model="addForm.min_like_count"  placeholder="请输入" size="small"></el-input>
                <p>注：点赞数小于500, 则默认为: 500</p>
            </el-form-item>
            <el-form-item label="日期范围" prop="need_date" label-width="80px">
                <el-date-picker value-format="yyyy-MM-dd" v-model="addForm.need_date" type="daterange" clearable size="small" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button  @click="resetAddForm()" class="el-button-width" size="small">取 消</el-button>
            <el-button type="primary" @click="AddtaskForm()" class="el-button-width" size="small">添 加</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
export default {
    components: {},
    name: "",
    data() {
        var maxValue = (rule, value, callback) => {
            if (Number(value) > 900000) {
                callback(new Error("数值不能超过900000"));
            }
            callback();
        };
        return {
            loading: false,
            dialogVisible: false,
            dialogVisible2: false,
            exportData: [],
            addForm:{},
            queryInfo: {
                query:'',
                page: 1,
                limit: 20,
            },
            total: 0,
            addFormRules: {
                min_like_count: [
                    {
                        required: true,
                        message: "请输入带货视频最小点赞数",
                        trigger: ["blur", "change"],
                    },
                    {
                        pattern:
                            /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                        required: true,
                        message: "请输入正确数值",
                        trigger: ["blur", "change"],
                    },
                ],
                url: [
                    { required: true, message: "请输入商品链接", trigger: "blur" },
                ],
                need_date: [
                    { required: true, message: "请选择日期范围", trigger: "change" },
                ],
            }
        };
    },
    filters: {
        formattedDate(dateString) {
            if(!dateString) return;
            // 将字符串拆分为年份、月份和日期
            const year = dateString.toString().substring(0, 4);
            const month = dateString.toString().substring(4, 6);
            const day = dateString.toString().substring(6, 8);
            // 组合成需要的格式
            return `${year}/${month}/${day}`;
        },  
    },
    created() {
        
    },
    methods: {
        getTaskList() {
            this.queryInfo.page = 1
            this.getDataList();
        },
        addTask(){
            this.dialogVisible2 = true;
        },
        getData() {
            this.dialogVisible = true;
            this.queryInfo.page = 1
            this.getDataList();
        },
        getQueryParameter(queryString, param) {
                // 查找问号的位置，确保我们处理的是参数部分
                const queryStart = queryString.indexOf('?');
                if (queryStart === -1) return ''; // 如果没有问号，返回空字符串

                // 提取问号后的部分作为查询字符串
                const query = queryString.substring(queryStart + 1);
                const params = new URLSearchParams(query);

                // 如果参数不存在，返回空字符串
                return params.has(param) ? params.get(param) : '';
        },
        async  AddtaskForm(){
            this.$refs.addFormRef.validate(async (valid) => {
            if (!valid) return;
            const { data: res } = await this.$http.get(
                "fxdata/fxboard/exportTaskRequest",
                {params:{
                        gid: this.getQueryParameter(this.addForm.url,'gid'),
                        ts:this.getQueryParameter(this.addForm.url,'ts'),
                        sign:this.getQueryParameter(this.addForm.url,'sign'),
                        start_batch_num:this.addForm.need_date[0].replaceAll('-',''),
                        end_batch_num:this.addForm.need_date[1].replaceAll('-',''),
                        min_like_count:this.addForm.min_like_count
                    }
                }
            );
            let result =  JSON.parse(res);
                if (result.Code !== 200) {
                    this.$message.error(result.Msg);
                } else {
                    this.$message.success(result.Msg);
                    this.getTaskList();
                    this.dialogVisible2 = false;
                }
            })
        },
        resetAddForm(){
            this.dialogVisible2 = false;
            this.$refs.addFormRef.resetFields();
        },
        //获取列表
        async getDataList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "fxdata/fxboard/exportTaskList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.total = res.data.count;
                this.exportData = res.data.list;
            }
        },

        // 删除视频
        deletList(id) {
            this.$confirm("是否要删除该数据?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "adminapi/Projectv2/proMaterialSummaryDel",
                        {
                            id: id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.getDataList();
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    }
                })
                .catch(() => {});
        },

        // 当前页切换
        handleCurrentChange(val) {
            this.queryInfo.page = val;
            this.getDataList()
        },

        // 关闭重置表单
        resetForm() {
            this.queryInfo.page = 1;
            this.queryInfo.query = '';
            this.dialogVisible = false;
        },
    },
};
</script>
<style scoped>
/deep/ .el-input .el-input__clear,
/deep/  .el-date-editor .el-range__close-icon {
    color: #dcdee2 !important;
}
.option_content {
    line-height: 20px;
    margin-top: 5px;
}
.tm_y {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.tm_t {
    font-size: 14px;
    margin-left: 12px;
}
.gray_y {
    background: #b4b7bd;
}
.yellow_y {
    background: #fabc42;
}
.green_y {
    background: #00c271;
}
.red_y {
    background: #fe6262;
}
.gray_t {
    color: #b4b7bd;
}
.yellow_t {
    color: #fabc42;
}
.green_t {
    color: #00c271;
}
.red_t {
    color: #fe6262;
}
.no_point{
    cursor: no-drop;
}
</style>

